<!-- eslint-disable max-len -->
<template>
  <div class="h100">
    <a-tabs @change="callback" class="tabOuterMargin h100">
      <a-tab-pane key="AllApplyComp" :tab="$t('allApply')"><component :is="changeCompt" v-if="changeCompt === 'AllApplyComp'"></component></a-tab-pane>
      <a-tab-pane key="UnderReview" :tab="$t('underReview')"><component :is="changeCompt" v-if="changeCompt === 'UnderReview'"></component></a-tab-pane>
      <a-tab-pane key="Passed" :tab="$t('passed')"><component :is="changeCompt" v-if="changeCompt === 'Passed'"></component></a-tab-pane>
      <a-tab-pane key="Rejected" :tab="$t('rejected')"><component :is="changeCompt" v-if="changeCompt === 'Rejected'"></component></a-tab-pane>
      <a-tab-pane key="Canceled" :tab="$t('canceled2')"><component :is="changeCompt" v-if="changeCompt === 'Canceled'"></component></a-tab-pane>
      <a-tab-pane key="Exception" :tab="$t('formException')"><component :is="changeCompt" v-if="changeCompt === 'Exception'"></component></a-tab-pane>
      <a-tab-pane key="Abolished" :tab="$t('abolished')"><component :is="changeCompt" v-if="changeCompt === 'Abolished'"></component></a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import AllApplyComp from './allApply.vue'
import UnderReview from './underReview.vue'
import Passed from './passed.vue'
import Rejected from './rejected.vue'
import Canceled from './canceled.vue'
import Abolished from './abolished.vue'
import Exception from './exception.vue'
export default {
  components: {
    AllApplyComp,
    UnderReview,
    Passed,
    Rejected,
    Canceled,
    Abolished,
    Exception
  },
  data () {
    return {
      changeCompt: 'AllApplyComp'
    }
  },
  methods: {
    // tab页签点击切换加载组件
    callback (key) {
      this.changeCompt = key
    }
  }
}
</script>
<style lang="less" scoped>
.tabOuterMargin {
  padding: 0px 24px;
  /deep/ .ant-tabs-content{
    height: calc(100% - 60px);
  }
}
</style>
